/**
 * Created by zhangyida on 15/12/29.
 */
'use strict';
import {
    Text,
    View,
    StyleSheet,
    TouchableHighlight
} from 'react-native';
import React from 'react';
import Utils from '../config/utils';
import Icon from 'react-native-vector-icons/Ionicons';


export default class Footer extends React.Component {

    toOther(value) {
        if (value == this.props.current) {
            return;
        }
        this.props.navigator.replace({
            id: value
        });
    }

    render() {
        return (
            <View style={styles.footer}>
                <TouchableHighlight onPress={this.toOther.bind(this,'Main')} style={styles.item}>
                    <View style={styles.item}>
                        <Icon name="ios-home" size={23} color={this.props.current=='Main'?"#E02820":"#ffffff"} style={styles.itemIcon}/>
                        <Text style={[styles.bottomText,{color:this.props.current=='Main'?'#e02820':'#ffffff'}]} >
                            首页
                        </Text>
                    </View>
                </TouchableHighlight>

                <TouchableHighlight style={styles.item} onPress={this.toOther.bind(this,'News')}>
                    <View style={styles.item}>
                        <Icon name="ios-globe" size={23} color={this.props.current=='News'?"#E02820":"#ffffff"} style={styles.itemIcon}/>
                        <Text style={[styles.bottomText,{color:this.props.current=='News'?'#e02820':'#ffffff'}]} >
                            资讯
                        </Text>
                    </View>
                </TouchableHighlight>

                <TouchableHighlight style={styles.item} onPress={this.toOther.bind(this,'Portfolio')}>
                    <View style={styles.item}>
                        <Icon name="ios-heart" size={23} color={this.props.current=='Portfolio'?"#E02820":"#ffffff"} style={styles.itemIcon}/>
                        <Text style={[styles.bottomText,{color:this.props.current=='Portfolio'?'#e02820':'#ffffff'}]} >
                            自选
                        </Text>
                    </View>
                </TouchableHighlight>

                {/* <TouchableHighlight style={styles.item}  onPress={this.toOther.bind(this,'Markets')}>
                    <View>
                        <Icon name="globe" size={23} color={this.props.current=='Markets'?"#E02820":"#ffffff"} style={styles.itemIcon}/>
                        <Text style={[styles.bottomText,{color:this.props.current=='Markets'?'#e02820':'#ffffff'}]} >
                            行情
                        </Text>
                    </View>
                </TouchableHighlight>

                <TouchableHighlight style={styles.item}  onPress={this.toOther.bind(this,'Trade')}>
                    <View>
                        <Icon name="shopping-bag" size={23} color={this.props.current=='Trade'?"#E02820":"#ffffff"} style={styles.itemIcon}/>
                        <Text style={[styles.bottomText,{color:this.props.current=='Trade'?'#e02820':'#ffffff'}]} >
                            交易
                        </Text>
                    </View>
                </TouchableHighlight>
                    */}
                <TouchableHighlight style={styles.item} onPress={this.toOther.bind(this,'Setting')}>
                    <View style={styles.item}>
                        <Icon name="ios-person" size={23} color={this.props.current=='Setting'?"#E02820":"#ffffff"} style={styles.itemIcon}/>
                        <Text style={[styles.bottomText,{color:this.props.current=='Setting'?'#e02820':'#ffffff'}]} >
                            我的
                        </Text>
                    </View>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    bottomText: {
        flex: 1,
        color: '#ffffff',
        textAlign: 'center',
        fontSize: 11,
        marginTop:2
    },
    footer: {
        height:40,
        flex: 1,
        backgroundColor: '#000000',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    item: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});